<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
            box-sizing: border-box;
        }

        .form-box {
            width: 1200px;
            margin: auto;
            padding: 0px 10px;
        }

        .form-row {
            padding: 5px;
            display: flex;
            align-items: center;
        }

        .form-row>input {
            height: 37px;
            outline: none;
            border: 1px solid #cccccc;
            border-radius: 5px;
            width: 200px;
            padding: 0px 5px;
        }

        .form-label {
            display: inline-block;
            width: 120px;
            text-align: right;
        }

        .table-box {
            width: 1200px;
            margin: auto;
            margin-top: 15px;
        }

        .table {
            width: 100%;
        }

        .table,
        .table th,
        .table td {
            border: 1px solid #FF7777;
            /* 收紧单元格之间的边框 */
            border-collapse: collapse;
        }

        /* 单元格，可以设置文字的颜色 */
        .table th,
        .table td {
            padding: 6px;
            color: #444444;
            text-align: center;
        }

        /* 隔行效果：奇数行 */
        .table>tbody>tr:nth-child(odd) {
            background-color: #77FF77;
        }

        /* 隔行效果：偶数行 */
        .table>tbody>tr:nth-child(even) {
            background-color: #7777FF;
        }

        /* 鼠标浮动，改变行的背景色 */
        .table>tbody>tr:nth-child(n):hover {
            background-color: #FF00FF;
        }

        .btn {
            padding: 10px 25px;
            outline: none;
            border: none;
            background-color: #2a75ed;
            color: #fff;
            border-radius: 5px;
            margin: 0px 5px;
        }

        .btn-remove {
            padding: 10px 25px;
            outline: none;
            border: none;
            background-color: #ed2a2a;
            color: #fff;
            border-radius: 5px;
            margin: 0px 5px;
        }
    </style>
</head>

<body>
    <form id="my-form">
        <fieldset class="form-box">
            <legend>学员基本信息</legend>
            <div class="form-row">
                <label for="name" class="form-label">姓名：</label>
                <input type="text" name="name" id="name" required maxlength="24">
            </div>
            <div class="form-row">
                <label for="age" class="form-label">年龄：</label>
                <input type="number" name="age" id="age" required maxlength="3">
            </div>
            <div class="form-row">
                <label for="tel" class="form-label">电话：</label>
                <input type="tel" name="tel" id="tel" required pattern="1\d{10}" maxlength="11">
            </div>
            <div class="form-row">
                <label for="school" class="form-label">学校：</label>
                <input type="text" name="school" id="school" required maxlength="24">
            </div>
            <div class="form-row">
                <button class="btn">提交</button>
                <button class="btn" type="reset">清空</button>
                <button class="btn" type="button">保存</button>
            </div>
        </fieldset>
    </form>
    <div class="table-box">
        <h2>学员信息列表</h2>
        <table class="table">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>电话</th>
                    <th>学校</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</body>
<script>
    let form = document.querySelector("#my-form");

    let inputs = document.querySelectorAll(".form-box input");

    let tbody = document.querySelector(".table>tbody");

    let btnSave = document.querySelector(".btn[type='button']");

    function handleDelete(e) {
        // 得到事件触发源的DOM对象
        let btn = e.currentTarget;
        // 通过parentNode获取父节点，来到目标父节点，删除父节点
        btn.parentNode.parentNode.remove();
    }

    // 创建一行数据
    function createTableRow(values) {
        let tr = document.createElement("tr");
        values.forEach(v => {
            let td = document.createElement("td");
            td.innerText = v;
            tr.appendChild(td);
        })

        let td = document.createElement("td");

        let button = document.createElement("button");
        button.innerText = "删除";
        button.addEventListener("click", handleDelete);
        button.classList.add("btn-remove");
        td.appendChild(button);

        tr.appendChild(td);
        tbody.appendChild(tr);
    }


    form.addEventListener("submit", function (e) {
        // 阻止事件默认行为：这里因为表单事件，会阻止表单提交。
        // 表单提交会触发页面完全刷新，在前后端分离的开发中，表单出场非常少了，即使出现因为通常使用局部刷新技术，所以也会阻止表单提交。
        // 这里是为了使用html5的表单校验，所以使用了表单
        e.preventDefault();

        // alert("表单提交！！！！")
        // let name = inputs[0].value;
        // let age = inputs[1].value;
        // let tel = inputs[2].value;
        // let school = inputs[3].value;
        // let {"0.value":name,"1.value": age,"2.value":tel,"3.value":school} = [inputs];

        // 如果不会使用借调，可以使用传统for循环
        // let values = [];
        // inputs.forEach(v => {
        //     inputs.push(v.value);
        // })
        // call: 借调
        let values = Array.prototype.map.call(inputs, v => v.value);
        createTableRow(values);
        form.reset();

    })

    // 保存按钮
    btnSave.addEventListener("click", function () {
        let trs = tbody.querySelectorAll("tr");
        let arr = [];
        trs.forEach(v => {
            let tds = v.querySelectorAll("td");
            let rowObject = {
                name: tds[0].innerText,
                age: tds[1].innerText,
                tel: tds[2].innerText,
                schoole: tds[3].innerText,
            }
            arr.push(rowObject);
        })
        console.log("arr =",arr);
        // 保存到本地
        localStorage.setItem("data", JSON.stringify(arr));
    })

    function loadData() {
        let str = localStorage.getItem("data");
        if (str) {
            let arr = JSON.parse(str);
            arr.forEach(v => {
                createTableRow([
                    v.name,
                    v.age,
                    v.tel,
                    v.schoole
                ]);
            })
        }
    }

    loadData();
</script>

</html>